<template>
  <div class="cesium-tif" id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import TIFFImageryProvider from "tiff-imagery-provider";
import "cesium/Build/Cesium/Widgets/widgets.css";

//
onMounted(async () => {
  // 初始渲染 Viewer
  const viewer = new Cesium.Viewer("cesiumContainer");

  // 渲染 tif 数据
  const provider = new TIFFImageryProvider({
    url: "/rjy.tif",
  });
  provider.readyPromise.then(() => {
    var imageLayer = viewer.imageryLayers.addImageryProvider(provider);

    // 飞到 tif 图像上
    viewer.flyTo(imageLayer, {
      duration: 1,
    });
  });
});
</script>

<style scoped>
.cesium-tif {
  width: 50%;
  height: 100%;
}
</style>
